<template>
    <div class="flex-col">
        <div class="flex1 flex-col">
            <div class="panel _body page-top">
                <el-form label-width="6em">
                    <el-row>
                        <el-col :span="4">
                            <el-form-item label="所属园区">
                                <el-select ref="selectLabel"
                                           v-model="oFilterForm.a"
                                           :clearable="true"
                                           placeholder="全部">
                                    <el-option v-for="item in a"
                                               :key="item.value"
                                               :label="item.label"
                                               :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item label="所属片区">
                                <el-select v-model="oFilterForm.b"
                                           :clearable="true"
                                           placeholder="全部">
                                    <el-option v-for="item in b"
                                               :key="item.value"
                                               :label="item.label"
                                               :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item label="所属行业">
                                <el-select v-model="oFilterForm.c"
                                           :clearable="true"
                                           placeholder="全部">
                                    <el-option v-for="item in c"
                                               :key="item.value"
                                               :label="item.label"
                                               :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item label="企业名称">
                                <el-input placeholder="请输入企业名称"
                                          v-model="oFilterForm.d"></el-input>
                            </el-form-item>
                        </el-col>

                        <!-- 搜索按钮组-->
                        <el-col :span="8"
                                class="page-top-btns _right">
                            <el-form-item label-width="0">
                                <el-button icon="el-icon-search"
                                           type="primary"
                                           @click="fDialogBtnClick('search')">搜索</el-button>
                                <el-button icon="el-icon-refresh-right"
                                           @click="fDialogBtnClick('reset')">重置</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>

            <div class="panel _body flex1 flex-col">
                <div class="flex1">
                    <!-- 表格 -->
                    <el-table :data="aTable"
                              height="100%"
                              stripe>
                        <el-table-column property="yqmc"
                                         label="所属园区"
                                         align="center">
                        </el-table-column>
                        <el-table-column property="pqmc"
                                         label="所属片区"
                                         align="center">
                        </el-table-column>
                        <el-table-column property="enterprisename"
                                         label="企业名称"
                                         align="center">
                        </el-table-column>
                        <el-table-column property="creditcode"
                                         label="统一社会信用代码/法人名称"
                                         align="center">
                        </el-table-column>
                        <el-table-column property="tradename"
                                         label="所属行业"
                                         align="center">
                        </el-table-column>
                        <el-table-column property="zdcy"
                                         label="主导产业"
                                         align="center">
                        </el-table-column>


                        <el-table-column label="操作"
                                         align="center"
                                         width="200">
                            <template v-slot="oRow">
                                <el-button @click="fTableBtnClick('view', oRow.row)">查看</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <!-- 分页条 -->
                <wiv-pagebar ref="pagebar"
                             @after-flip="fAfterFlip"></wiv-pagebar>
            </div>
        </div>

        <!--子页-->
        <sub-detail class="page _sub"
                    v-if="bShowDetail"
                    :visible.sync="bShowDetail"
                    :detail="oCurRow"
                    :is-view="bIsView"
                    @data-change="fDetailDataChange" />
    </div>
</template>

<script>
    import { URLS_HBDA } from '@/urls.js';
    import SubDetail from './qyhbda/index.vue';//详情子页

    export default {
        components: {
            SubDetail
        },
        //**** el, name
        //**** components, directives
        //**** extends, mixins, provide/inject
        //**** props, data, computed
        data() {
            return {
                //-- 表格 --
                nStartno: 0,//当前页数据的开始序号（从1开始）
                aTable: [],//表格数据  
                oCurRow: null, //表格选中行
                bShowDetail: false, //子页是否显示
                bIsView: false, //详情是否为查看状态，查看时，表单内容不可编辑 
                oFilterForm: { //过滤条件
                    a: '',
                    b: '',
                    c: '',
                    d: '',
                },
                a: [],
                b: [],
                c: []
            };
        },
        //**** watch
        //**** 生命周期钩子：mounted, updated, beforeDestroy 等
        mounted() {

            this.fResetTable();
            this.fResetSelect()

        },
        created() {

        },
        beforeDestroy() {
        },
        //**** methods
        methods: {
            //请求下拉框数据
            fResetSelect() {
                this.$WIV.fRequest({
                    url: URLS_HBDA.d_getSelector
                }).then((res) => {
                    let pqList = res.data.pqList
                    let tradeList = res.data.tradeList
                    let yqList = res.data.yqList
                    this.a = yqList.map((item, index) => { let obj = {}; obj = { value: index, label: item }; return obj })
                    this.b = pqList.map((item, index) => { let obj = {}; obj = { value: index, label: item }; return obj })
                    this.c = tradeList.map((item, index) => { let obj = {}; obj = { value: index, label: item }; return obj })
                })
            },
            //按钮事件
            fDialogBtnClick(sType) {//弹框按钮点击事件
                switch (sType) {
                    case 'search'://搜索 
                        console.log('点击了搜索事件')
                        break;
                    case 'reset'://重置 
                        this.oFilterForm = {}
                        break;
                    case 'test'://其他按钮
                        //...
                        break;
                }
            },
            fDetailDataChange() {//弹框中数据发生变化，如：新增、修改的保存操作
                //this.fResetList();
            },
            //*** 开放给父子组件的接口方法
            //*** 事件响应函数 
            fAfterFlip(aData, oPageApi) {
                this.aTable = aData;
                this.nStartno = oPageApi.startno;
            },
            //*** 其他
            //请求表格数据
            fResetTable() {
                this.$refs.pagebar.fReset({
                    url: URLS_HBDA.d_getQyhbdaList
                });
            },
            fTableBtnClick(sType, oRow) { //表格按钮点击事件
                //console.log(sType, oRow);
                switch (sType) {
                    case 'view':  //查看
                        this.oCurRow = oRow;
                        this.bShowDetail = true;
                        this.bIsView = true;

                        this.$nextTick(() => {
                            this.$EventBus.$emit('parameters', oRow)
                        });
                        break;
                    case 'modif': //修改
                        this.oCurRow = oRow;
                        this.bShowDetail = true;
                        break;
                    default:
                        break;
                }
            },
            //搜索事件
            fSearchClick() {
            }
        }
        //**** template, render
    };
</script>
